<template>
  <div class="ActivityAnalysis">
    <el-card>
      <div class="searchBox">
        <h3><span class="tt"></span> 活动统计</h3>
        <div>
          <el-radio-group v-model="type" size="small" fill="#7b94d8">
            <el-radio-button label="1">今日</el-radio-button>
            <el-radio-button label="2">总计</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <el-row class="cardRow" :gutter="20">
        <el-col :span="4">
          <div class="card">
            <h3>
              <span class="point"></span>
              用户活动曝光次数
            </h3>
            <h1>
              <i class="iconfont">&#xe771;</i>
              300
            </h1>
            <div class="line"></div>
            <div class="foot">2021-5-05-25</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="card">
            <h3>
              <span class="point"></span>
              用户活动点击次数
            </h3>
            <h1>
              <i class="iconfont">&#xe75b;</i>
              300
            </h1>
            <div class="line"></div>

            <div class="foot">2021-5-05-25</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="card">
            <h3>
              <span class="point"></span>
              用户活动点击人数
            </h3>
            <h1>
              <i class="iconfont">&#xe74b;</i>
              300
            </h1>
            <div class="line"></div>

            <div class="foot">2021-5-05-25</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="card">
            <h3>
              <span class="point"></span>
              主播活动曝光次数
            </h3>
            <h1>
              <i class="iconfont">&#xe771;</i>
              300
            </h1>
            <div class="line"></div>

            <div class="foot">2021-5-05-25</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="card">
            <h3>
              <span class="point"></span>
              主播活动点击次数
            </h3>
            <h1>
              <i class="iconfont">&#xe75b;</i>
              300
            </h1>
            <div class="line"></div>

            <div class="foot">2021-5-05-25</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="card">
            <h3>
              <span class="point"></span>
              主播活动点击人数
            </h3>
            <h1>
              <i class="iconfont">&#xe74b;</i>
              300
            </h1>
            <div class="line"></div>

            <div class="foot">2021-5-05-25</div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card style="margin-top: 20px">
      <div class="searchBox">
        <h3><span class="tt"></span> 当前活动点击次数与曝光次数</h3>
        <div>
          <el-select v-model="type1" placeholder="请选择" size="small">
            <el-option label="不限人群" value=""> </el-option>
            <el-option label="用户" value="1"> </el-option>
            <el-option label="主播" value="2"> </el-option>
          </el-select>
          <el-button icon="el-icon-paperclip" size="small">导出EXCEL</el-button>
        </div>
      </div>
      <div class="chart">
        <div id="echarts" style="width: 100%; height: 100%"></div>
      </div>
    </el-card>
    <el-card style="margin-top: 20px">
      <div class="searchBox">
        <h3><span class="tt"></span> 历史活动点击次数与曝光次数</h3>
        <div>
          <el-select v-model="type2" placeholder="请选择" size="small">
            <el-option label="不限人群" value=""> </el-option>
            <el-option label="用户" value="1"> </el-option>
            <el-option label="主播" value="2"> </el-option>
          </el-select>
          <el-button icon="el-icon-paperclip" size="small">导出EXCEL</el-button>
        </div>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%; margin-top: 10px"
        :header-cell-style="{ background: '#f5f7fa' }"
      >
        <template slot="empty">
          <el-empty :image-size="200"></el-empty>
        </template>
        <el-table-column prop="name" label="活动名称"> </el-table-column>
        <el-table-column prop="address" label="曝光次数"> </el-table-column>
        <el-table-column prop="address" label="点击次数"> </el-table-column>
        <el-table-column prop="address" label="点击人数"> </el-table-column>
      </el-table>
      <pagination
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
export default {
  components: { Pagination },
  data() {
    return {
      type: "1",
      type1: "",
      myChart: null,
      type2: "",
      tableData: [],
      total: 0,
      page: 1,
      pageSize: 10,
    };
  },
  methods: {
    //初始化Echarts
    echartsInit() {
      this.myChart = this.$echarts.init(document.getElementById("echarts"));
    },
    setChartOption() {
      var colors = ["#7b94d8", "#91CC75", "#fac858"];
      this.myChart.setOption({
        color: colors,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        grid: {
          right: "20%",
        },
        legend: {
          data: ["曝光次数", "点击次数", "点击人数"],
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            data: ["活动1", "活动2", "活动3"],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "曝光次数",
            min: 0,
            position: "right",
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[0],
              },
            },
            axisLabel: {
              formatter: "{value} ",
            },
          },
          {
            type: "value",
            name: "点击次数",
            min: 0,
            position: "right",
            offset: 80,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[1],
              },
            },
            axisLabel: {
              formatter: "{value} ",
            },
          },
          {
            type: "value",
            name: "点击人数",
            min: 0,
            position: "right",
            offset: 160,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[2],
              },
            },
            axisLabel: {
              formatter: "{value} ",
            },
          },
        ],
        series: [
          {
            name: "曝光次数",
            type: "bar",
            barWidth: 30,
            data: [10, 20, 15],
          },
          {
            name: "点击次数",
            type: "bar",
            yAxisIndex: 1,
            barWidth: 30,
            data: [20, 15, 10],
          },
          {
            name: "点击人数",
            type: "bar",
            yAxisIndex: 2,
            barWidth: 30,
            data: [10, 15, 10],
          },
        ],
      });
    },
    getList() {},
  },
  mounted() {
    this.echartsInit();
    this.setChartOption();
  },
};
</script>

<style lang="less" scoped>
.ActivityAnalysis {
  padding: 20px;
  .searchBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    h3 {
      margin: 0;
      display: flex;
      align-items: center;
      .tt {
        display: inline-block;
        width: 5px;
        height: 18px;
        margin-right: 5px;
        background-color: #7b94d8;
      }
    }
    .right {
      display: flex;
      align-items: center;
    }
  }
  .card {
    height: 150px;
    border: 2px solid #ebeff8;
    border-radius: 5px;
    h3 {
      display: flex;
      align-items: center;
      padding-left: 10px;
      .point {
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 5px solid #7b94d8;
        margin-right: 10px;
      }
    }
    h1 {
      margin: 0px 0;
      text-align: right;
      padding-right: 20px;
      i {
        color: #7b94d8;
      }
    }
    .line {
      margin-top: 10px;
      border-top: 2px solid #ebeff8;
    }
    .foot {
      padding: 10px 20px 0;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: space-between;
      // .left{

      // }
    }
  }
  .chart {
    width: 100%;
    height: 400px;
  }
}
</style>